<template>
  <el-card>
    <!-- 搜索表单 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px" class="search-form">
      <el-form-item label="药名">
        <el-input v-model="queryParams.drugName" placeholder="请输入药名" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="库存">
        <el-input-number v-model="queryParams.drugStock" :min="100" placeholder="请输入库存" style="width: 180px"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.drugStatus" placeholder="请选择状态" style="width: 120px">
          <el-option label="全部" :value="null"></el-option>
          <el-option label="上架" value="1"></el-option>
          <el-option label="下架" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="药品类型">
        <el-select v-model="queryParams.drugType" placeholder="请选择类型" style="width: 120px">
          <el-option label="全部" :value="null"></el-option>
          <el-option label="处方药" value="1"></el-option>
          <el-option label="非处方药" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button type="danger" @click="handleReset">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="handleAdd">添加药品</el-button>
      </el-form-item>
    </el-form>

    <!-- 添加药品 -->
    <el-dialog title="添加药品" v-model="addDialogVisible" width="500px">
      <el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="100px">
        <el-form-item label="药品编号" prop="dsNo">
          <el-input v-model="addForm.dsNo"></el-input>
        </el-form-item>
        <el-form-item label="药名" prop="dsName">
          <el-input v-model="addForm.dsName"></el-input>
        </el-form-item>
        <el-form-item label="生产厂商" prop="dsBrand">
          <el-input v-model="addForm.dsBrand"></el-input>
        </el-form-item>
        <el-form-item label="药品进价" prop="dsInprice">
          <el-input-number v-model="addForm.dsInprice" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="药品售价" prop="dsOutprice">
          <el-input-number v-model="addForm.dsOutprice" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="库存" prop="dsStock">
          <el-input-number v-model="addForm.dsStock" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="dsStatus">
          <el-select v-model="addForm.dsStatus">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处方药" prop="dsIsprescription">
          <el-select v-model="addForm.dsIsprescription">
            <el-option label="处方药" value="1"></el-option>
            <el-option label="非处方药" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑药品 -->
    <el-dialog title="编辑药品" v-model="editDialogVisible" width="500px">
      <el-form :model="editForm" ref="editFormRef" :rules="editFormRules" label-width="100px">
        <el-form-item label="药品编号" prop="dsNo">
          <el-input v-model="editForm.dsNo" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="药名" prop="dsName">
          <el-input v-model="editForm.dsName"></el-input>
        </el-form-item>
        <el-form-item label="生产厂商" prop="dsBrand">
          <el-input v-model="editForm.dsBrand"></el-input>
        </el-form-item>
        <el-form-item label="药品进价" prop="dsInprice">
          <el-input-number v-model="editForm.dsInprice" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="药品售价" prop="dsOutprice">
          <el-input-number v-model="editForm.dsOutprice" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="库存" prop="dsStock">
          <el-input-number v-model="editForm.dsStock" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="状态" prop="dsStatus">
          <el-select v-model="editForm.dsStatus">
            <el-option label="上架" value="1"></el-option>
            <el-option label="下架" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处方药" prop="dsIsprescription">
          <el-select v-model="editForm.dsIsprescription">
            <el-option label="处方药" value="1"></el-option>
            <el-option label="非处方药" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmEdit">确定</el-button>
      </template>
    </el-dialog>


    <!-- 药品列表 -->
    <el-table :data="drugs" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="50"></el-table-column>
      <el-table-column prop="dsNo" label="药品编号" width="100"></el-table-column>
      <el-table-column prop="dsName" label="药名" width="180"></el-table-column>
      <el-table-column prop="dsBrand" label="生产厂商" width="150"></el-table-column>
      <el-table-column prop="dsInprice" label="药品进价" width="100">
        <template #default="scope">
          {{ scope.row.dsInprice }}¥
        </template>
      </el-table-column>
      <el-table-column prop="dsOutprice" label="药品售价" width="100">
        <template #default="scope">
          {{ scope.row.dsOutprice }}¥
        </template>
      </el-table-column>
      <el-table-column prop="dsStock" label="库存" width="80"></el-table-column>
      <el-table-column prop="dsStatus" label="状态" width="80">
        <template #default="scope">
          <el-tag v-if="scope.row.dsStatus == 1" type="success">上架</el-tag>
          <el-tag v-else-if="scope.row.dsStatus == 0" type="info">下架</el-tag>
          <el-tag v-else>未知状态</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dsIsprescription" label="处方药" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.dsIsprescription == 1" type="warning">处方药</el-tag>
          <el-tag v-else-if="scope.row.dsIsprescription == 0" type="success">非处方药</el-tag>
          <el-tag v-else>未知类型</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination-container">
    </el-pagination>
  </el-card>
</template>

<script>

import {addDrug, deleteDrug, findAll, updateDrug} from "../api/drug.js";

export default {
  name: "DrugManagement",
  data() {
    return {
      // ... 其他数据
      addFormRules: {
        dsNo: [
          { required: true, message: '请输入药品编号', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        dsName: [
          { required: true, message: '请输入药名', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        dsBrand: [
          { required: true, message: '请输入生产厂商', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        dsInprice: [
          { required: true, message: '请输入药品进价', trigger: 'change' },
          { type: 'number', min: 0, message: '进价不能小于0', trigger: 'change' }
        ],
        dsOutprice: [
          { required: true, message: '请输入药品售价', trigger: 'change' },
          { type: 'number', min: 0, message: '售价不能小于0', trigger: 'change' }
        ],
        dsStock: [
          { required: true, message: '请输入库存数量', trigger: 'change' },
          { type: 'number', min: 0, message: '库存不能小于0', trigger: 'change' }
        ],
        dsStatus: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        dsIsprescription: [
          { required: true, message: '请选择药品类型', trigger: 'change' }
        ]
      },
      // ... 其他数据
      editFormRules: {
        dsName: [
          { required: true, message: '请输入药名', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        dsBrand: [
          { required: true, message: '请输入生产厂商', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        dsInprice: [
          { required: true, message: '请输入药品进价', trigger: 'change' },
          { type: 'number', min: 0, message: '进价不能小于0', trigger: 'change' }
        ],
        dsOutprice: [
          { required: true, message: '请输入药品售价', trigger: 'change' },
          { type: 'number', min: 0, message: '售价不能小于0', trigger: 'change' }
        ],
        dsStock: [
          { required: true, message: '请输入库存数量', trigger: 'change' },
          { type: 'number', min: 0, message: '库存不能小于0', trigger: 'change' }
        ],
        dsStatus: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ],
        dsIsprescription: [
          { required: true, message: '请选择药品类型', trigger: 'change' }
        ]
      },
      queryParams: {
        drugName: "",
        drugStock: null,
        drugStatus: "",
        drugType: "",
        pageNum: 1,
        pageSize: 6
      },
      pagination: {
        pageNum: 1,
        pageSize: 5,
        total: 0
      },
      drugs: [],
      addDialogVisible: false,
      editDialogVisible: false,
      addForm: {
        dsNo: '',
        dsName: '',
        dsBrand: '',
        dsInprice: 0,
        dsOutprice: 0,
        dsStock: 0,
        dsStatus: '1',
        dsIsprescription: '1'
      },
      editForm: {
        id: '',
        dsNo: '',
        dsName: '',
        dsBrand: '',
        dsInprice: 0,
        dsOutprice: 0,
        dsStock: 0,
        dsStatus: '1',
        dsIsprescription: '1'
      }
    };
  },
  methods: {
    async fetchData() {
      this.queryParams.pageNum = this.pagination.pageNum;
      this.queryParams.pageSize = this.pagination.pageSize;
      const params = { ...this.queryParams };
      console.log( params)
      const { data } = await findAll(params);
      console.log( data)
      this.drugs = data.obj.list;
      this.pagination.total = data.obj.total;
    },
    handleQuery() {
      this.fetchData();
    },
    handleReset() {
      this.queryParams = {
        drugName: "",
        drugStock: null,
        drugStatus: null,
        drugType: null,
        pageNum: 1,
        pageSize: 10
      };
      this.fetchData();
    },
    handleAdd() {
      // 添加药品逻辑
      // this.$message.info("添加药品功能待实现");
      this.addDialogVisible = true;
      // 重置表单
      this.addForm = {
        dsNo: '',
        dsName: '',
        dsBrand: '',
        dsInprice: 0,
        dsOutprice: 0,
        dsStock: 0,
        dsStatus: '1',
        dsIsprescription: '1'
      };
    },
    async confirmAdd() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.addForm);
            let { data: data } = await addDrug(this.addForm);
            console.log(data);
            this.$message.success('药品添加成功');
            this.addDialogVisible = false;
            this.fetchData(); // 重新加载数据
          } catch (error) {
            this.$message.error('添加失败: ' + error.message);
          }
        } else {
          this.$message.warning('请填写正确的表单信息');
          return false;
        }
      });
    },

    // async confirmAdd() {
   //    try {
   //      console.log( this.addForm)
   //    let {data:data} =  await addDrug(this.addForm);
   //      console.log( data)
   //      this.$message.success('药品添加成功');
   //      this.addDialogVisible = false;
   //      this.fetchData(); // 重新加载数据
   //    } catch (error) {
   //      this.$message.error('添加失败: ' + error.message);
   //    }
   //  },
    handleEdit(row) {
      // 修改药品逻辑
      this.editDialogVisible = true;
      // 将选中行的数据填充到编辑表单
      this.editForm = { ...row };
    },
    // async confirmEdit() {
    //   try {
    //     console.log( this.editForm)
    //    await updateDrug(this.editForm);
    //
    //      this.$message.success('药品修改成功');
    //      this.editDialogVisible = false;
    //      this.fetchData(); // 重新加载数据
    //
    //   } catch (error) {
    //     this.$message.error('修改失败: ' + error.message);
    //   }
    // },
    async confirmEdit() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (valid) {
          try {
            console.log(this.editForm);
            await updateDrug(this.editForm);
            this.$message.success('药品修改成功');
            this.editDialogVisible = false;
            this.fetchData(); // 重新加载数据
          } catch (error) {
            this.$message.error('修改失败: ' + error.message);
          }
        } else {
          this.$message.warning('请填写正确的表单信息');
          return false;
        }
      });
    },

    handleDelete(row) {
      // 删除药品逻辑
      this.$confirm(`确定要删除药品：${row.dsName} 吗？`, '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteDrug(row.id);
          this.$message.success('药品删除成功');
          this.fetchData(); // 重新加载数据
        } catch (error) {
          this.$message.error('删除失败: ' + error.message);
        }
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    handleSizeChange() {
      this.fetchData();
    },
    handleCurrentChange() {
      this.fetchData();
    }
  },
  mounted() {
    this.fetchData();
  }
};
</script>

<style scoped>
.search-form {
  margin-bottom: 20px;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  text-align: center;
  padding: 20px 0;
}

.el-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 对话框样式优化 */
.el-dialog {
  border-radius: 8px;
}

.el-dialog__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
  padding: 15px 20px;
}

.el-dialog__body {
  padding: 20px;
}

.el-dialog__footer {
  border-top: 1px solid #ebeef5;
  padding: 15px 20px;
}
</style>


